<script setup lang="ts">
import MapboxMap from '@/components/mapbox-map/MapboxMap.vue'
import { reactive } from 'vue'

const mapId = 'project-plan-one-map'

const baseMapConfig = reactive({
  type: 'amap',
  name: '高德',
  id: 'amap',
})
</script>

<template>
  <div class="main-container">
    <div id="amap-container"></div>
    <MapboxMap
      :map-id="mapId"
      :base-map-config="baseMapConfig"
      @after-map-loaded="afterMapLoaded"
      @before-map-destroyed="beforeMapDestroyed"
    />
  </div>
</template>

<style scoped lang="scss">
.map-container {
  width: 100%;
  height: 100%;

  #amap-container {
    width: 100%;
    height: 100%;
  }
}
</style>
